<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件列表</title>
  <link rel="stylesheet" href="css/element.css">
  <link rel="stylesheet" href="css/common.css">
  <link rel="stylesheet" href="css/file-list.css">
</head>

<body>
  <div id="app" class="app">
    <div class="file-list-container"> 
      <div class="table">
      <el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport"
                   style="margin-bottom: 10px;">导 入</el-button>
        <el-table :data="fileList" style="width: 100%">
          <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
          <el-table-column prop="fileName" label="文件名" width="280" align="center"></el-table-column>
          <el-table-column prop="type" label="类型" width="180" align="center"></el-table-column>
          <el-table-column prop="modifyDate" width="200" label="修改日期" sortable align="center"></el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row)">下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog title="上传文件" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false" @closed="dialogClose">
      <el-upload class="upload-demo" drag action="http://localhost:9000/upload" multiple :on-success="uploadSuccess" :file-list="uploadFileList">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
  </el-dialog>
  </div>
  <script src="js/vue.js"></script>
  <script src="js/element.js"></script>
  <script src="js/axios.min.js"></script>
  <!-- <script src="js/api/file.js"></script> -->
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        open: false,
        fileList: [],
        total: 0,
        pageSize: 10,
        pageNum: 1,
        uploadFileList: [],
      },
      created() {
        this.getList();
      },
      methods: {
        getList(){
          axios.get("http://localhost:9000/fileList/" + this.pageNum + "/" + this.pageSize + "?parenPath=D:/UploadTest")
            .then(response => {
              console.log(response.data);
              this.fileList = response.data.row;
              this.total = response.data.total;
            })
        },
        handleDownload(row) {
          console.log(row);
          console.log("调用下载方法");
          // fileDownload(row.parentPath, row.fileName)
          window.location.href = 'http://localhost:9000/download/' + row.fileName;
        },
        handleSizeChange(e){
          console.log(e);
          this.pageSize = e;
          this.getList();
        },
        handleCurrentChange(e){
          console.log("页码："+e);
          this.pageNum = e;
          this.getList();
        },
        handleImport(){
          console.log("点击上传");
          this.open = true;
        },
        dialogClose(){
          console.log("关闭了dialog");
          this.uploadFileList = [];
        },
        uploadSuccess(res, file, fileList){
          this.uploadFileList = fileList;
        },
      }
    })
  </script>
</body>

</html>